<template>
  <div class="index">
    <el-container>
      <el-header style="width: 100%; height: 90px; padding: 0">
        <head-admin></head-admin>
      </el-header>
      <div class="container">
        <slider-bar></slider-bar>
        <div class="container-center">
          <router-view></router-view>
        </div>
      </div>
    </el-container>
    <dia-log @add="add"></dia-log>
  </div>
</template>

<script>
import { addUserInfo } from '@/api/user'
import HeadAdmin from './components/head.vue'
import SliderBar from './components/slider'
import { mapMutations, mapActions } from 'vuex'
import DiaLog from '@/components/dialog'
export default {
  components: { HeadAdmin, SliderBar, DiaLog },
  created () {
    const adminId = this.$cookies.get('admin_id')
    this.getAdminInfo({ adminId })
  },
  methods: {
    ...mapActions('admin', ['getAdminInfo']),
    ...mapMutations('user', ['changeIsDialog']),
    async add (value) {
      console.log(value)
      const res = await addUserInfo(value)
      console.log(res)
      this.changeIsDialog(false)
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  .container {
    width: 1400px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 0;
    height: 88%;
    display: flex;
    .container-center {
      box-sizing: border-box;
      padding: 30px 50px;
      width: 100%;
      height: 100%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
